<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { getBannerAPI, getCategoryAPI, getHotmutliAPI } from '@/utils/apis.js'
	import CustomNavbar from './components/CustomNavbar.vue'
	import CategoryPanel from './components/CategoryPanel.vue'
	import HotPanel from './components/HotPanel.vue'
	
	
	let bannerList = ref([])
	let cateList = ref([])
	let hotmutliList = ref([])
	// banner
	let getBannerData = async() => {
		let res = await getBannerAPI()
		bannerList.value = res.result
	}
	// 分类导航
	let getCategoryData = async() => {
		let res = await getCategoryAPI()
		cateList.value = res.result
	}
	// 商品推荐
	let getHotmutliData = async() => {
		let res = await getHotmutliAPI()
		hotmutliList.value = res.result
	}
	
	onLoad(() => {
		getBannerData()
		getCategoryData()
		getHotmutliData()
	})
	
	
	// 页面滚动触底事件
	let guessRef = ref()
	let onScrolltolower = () => {
		guessRef.value.getGuessLikeData()
	}
	
	// 下拉刷新触发事件
	// 下拉刷新状态
	let isTriggered = ref(false)
	let onRefresherrefresh = async() => {
		// 开启动画
		isTriggered.value = true
		
		// 处理猜你喜欢
		// 重置数据（分页，是否完成，数组列表追加那些）
		guessRef.value.resetData()
		
		// Promise.all里面的会同步执行，可以节约等待时间
		// await Promise.all的意思是等待Promise里面执行完，在执行下面的。
		await Promise.all([getBannerData(), getHotmutliData(), guessRef.value.getGuessLikeData()])
		
		
		
		isTriggered.value = false
	}
	
</script>

<template>
	<!-- 自定义头部 -->
	<CustomNavbar />
	<!-- 滚动区域 -->
	<scroll-view
		@scrolltolower="onScrolltolower"
		scroll-y
		class="scroll-view"
		refresher-enabled
		@refresherrefresh="onRefresherrefresh"
		:refresher-triggered="isTriggered">
		<!-- 轮播图 -->
		<XtxSwiper :list="bannerList"></XtxSwiper>
		<!-- nav导航 -->
		<CategoryPanel :list="cateList" />
		<!-- 商品推荐 -->
		<HotPanel :list="hotmutliList" />
		<!-- 猜你喜欢 -->
		<XtxGuess ref="guessRef" />
	</scroll-view>
</template>


<style>
page{
	background: #f7f7f7;
	height: 100%;
	display: flex;
	flex-direction: column;
}
.scroll-view{
	/* 这里有点奇怪，需要一个height，实际高度由flex:1控制*/
	height: 0;
	flex: 1;
}
</style>